<!--
 * @Author: [kangjie]
 * @Date: 2022-04-01 09:33:54
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-04-01 13:17:09
 * @Description: 
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
  <div id="app">
    <my-com>hello wolrd</my-com>
    <!-- 如果子组件当中没有内容 显示插槽中的内容 -->
    <my-com :msg="msg">
      <!-- 指定插槽填充位置 自定义插槽模板 -->
      <!-- 作用域插槽 scope是一个对象 显示的是插槽中传递的数据-->
      <template v-slot:default="scope">
        <div>
          123
          {{scope.subMsg}}
        </div>
      </template>
      <template v-slot:slot1>
        <div>
          456
        </div>
      </template>
      <template #slot1>
        <div>
          789
        </div>
      </template>
    </my-com>
  </div>
  <script>
    // 创建子组件
    let mycom={
      props:['msg'],
      data(){
        return {
          subMsg:'我是子组件'
        }
      },
      // 声明插槽
      // 1.没有名字的插槽叫默认插槽 
      // 2.具名插槽 
      template:`
        <div>
          子组件  day05 4.1
          {{msg}}
          <button><slot name='default' :subMsg='subMsg'>默认内容</slot></button>
          <div>
            {{msg}}
            {{subMsg}}
            <slot name='slot1'></slot>
          </div>
        </div>
      `
    };
    // 注册组件
    Vue.component('my-com',mycom);
    new Vue({
      el:'#app',
      data:{
        msg:'我是父组件'
      },
      methods:{
        
      }
    })
  </script>
</body>
</html>
<!-- 插槽声明 -->
<!-- {
  template:`
    <slot>插槽默认模板</slot>
  `
} -->
<!-- 2.自定义模板 -->
<my-com>
  <template #name>
    插槽自定义模板
  </template>
</my-com>